/* ==========================================================
   Hide the actual radio buttons
   ----------------------------------------------------------
   The user will click on the image labels instead.
   The radio buttons still exist and function normally.
   ========================================================== */
#dnn3299RadioBoxes input[type="radio"] {
    display: none;
}

/* ==========================================================
   Style each label that wraps an image
   ----------------------------------------------------------
   Makes the entire image clickable and provides a smooth
   animation when hovering or selecting.
   ========================================================== */
#dnn3299RadioBoxes .form-check-label {
    cursor: pointer;              /* Show hand cursor */
    display: inline-block;        /* Allows padding and transforms */
    padding: 8px;                 /* Space around each image */
    border-radius: 50%;           /* Keeps the clickable area circular */
    transition: all 0.2s ease;    /* Smooth animation */
}

/* ==========================================================
   Default appearance of all LEGO faces
   ----------------------------------------------------------
   Images start slightly faded until hovered or selected.
   ========================================================== */
#dnn3299RadioBoxes .form-check-label img {
    width: 50px;
    height: 50px;
    border-radius: 50%;           /* Circular image */
    opacity: 0.6;                 /* Slightly faded */
    transition: all 0.2s ease;    /* Animate opacity, scale, shadow */
}

/* ==========================================================
   Hover effect
   ----------------------------------------------------------
   Brightens and enlarges the image while the mouse is over it.
   ========================================================== */
#dnn3299RadioBoxes .form-check-label:hover img {
    opacity: 1;
    transform: scale(1.1);
}

/* ==========================================================
   Selected radio button
   ----------------------------------------------------------
   The adjacent label's image becomes fully opaque,
   slightly larger, and receives a green outline.
   This is the default outline color before the
   value-specific rules below override it.
   ========================================================== */
#dnn3299RadioBoxes input[type="radio"]:checked + label img {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 0 3px #4CAF50;
}

/* ==========================================================
   Value-specific highlight colors
   ----------------------------------------------------------
   Each radio value gets a different colored ring.
   These rules override the default green outline above.
   ========================================================== */

/* 1 = Very Unhappy */
#dnn3299RadioBoxes input[value="1"]:checked + label img {
    box-shadow: 0 0 0 3px red;
}

/* 2 = Unhappy */
#dnn3299RadioBoxes input[value="2"]:checked + label img {
    box-shadow: 0 0 0 3px orange;
}

/* 3 = Neutral */
#dnn3299RadioBoxes input[value="3"]:checked + label img {
    box-shadow: 0 0 0 3px yellow;
}

/* 4 = Happy */
#dnn3299RadioBoxes input[value="4"]:checked + label img {
    box-shadow: 0 0 0 3px lightgreen;
}

/* 5 = Very Happy */
#dnn3299RadioBoxes input[value="5"]:checked + label img {
    box-shadow: 0 0 0 3px green;
}